<template>
	<view class="role_select">
		<view class="logo">
			<img src="/static/images/login/login_logo.png" alt="" srcset="" class="image">
			<text class="text">中新联供应链服务平台</text>
		</view>
		<view class="roles">
			选择角色
			<view class="role" @tap="navigate('/pages/login/index', '0')">
				<image src="/static/images/login/supplier.png" class="sign"/>
				供应商
			</view>
			<view class="role" @tap="navigate('/pages/login/index', '1')">
				<image src="/static/images/login/customer.png" class="sign"/>
				客户
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		methods: {
			navigate(url, type) {
				this.$store.commit('setUserRole', type)
				this.goto(url)
			}
		},
	}
</script>

<style>
	.role_select {
	   height:100vh;
		 width: 100%;
	   background: #ffffff;
	   overflow: hidden;
	   position: relative;
	}
	
	.role_select .logo {
		margin: 100rpx 0rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.logo .image {
		width: 386upx;
		height: 80upx;
	}
	.logo .text {
		margin-top: 5upx;
		font-weight: bold;
		font-size: 32upx;
		color: #999999;
	}
	
	.role_select .roles {
		border-top: 1upx solid #DDDDDD;
		color: var(--theme-color);
		font-weight: bold;
		font-size: 40upx;
		padding-top: 86upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.roles .role {
		border: 1upx solid rgba(0, 0, 0, 0.07);
		box-shadow:0px 0px 9px 4px rgba(0,0,0,0.07);
		margin-top: 64upx;
		width: 397upx;
		height: 181upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34upx;
	}
	.roles .role .sign {
		width: 36upx;
		height: 36upx;
		margin-right: 5upx;
	}
</style>
